<!DOCTYPE html>
<html>
<head>
    <title>Flat Admin V.2 - Free Bootstrap Admin Templates</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <frame-options policy="SAMEORIGIN" />
    <#scripts />
    <style type="text/css">
    	.flat-blue .content{
    		margin: 0;
    		padding: 0;
    	}
    	.flat-blue .content .card-body{
    		padding-bottom:20px;
    	}
    	form .el-radio {
		    padding-top: 8px;
		}
    </style>
</head>

<body class="flat-blue">
	<div class="row content" id="main">
       <div class="col-xs-12 content">
           <div class="card">
               <div class="card-header">
                   <div class="card-title">
                       <div class="title">请填写菜单基本信息</div>
                   </div>
               </div>
               <div class="card-body">
                   <form class="form-horizontal">
                       <div class="form-group">
                           <label for="name" class="col-sm-2 control-label">菜单名称：</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" v-model="info.name" placeholder="请输入菜单名称">
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="code" class="col-sm-2 control-label">菜单编码：</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" v-model="info.code" placeholder="请输入菜单编码">
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="inputEmail3" class="col-sm-2 control-label">父级菜单：</label>
                           <div class="col-sm-10">
                           	   <input type="hidden" class="form-control" v-model="info.pcode">
                               <input type="text" class="form-control" v-model="info.pname" @click="selectParentMenu" placeholder="请选择父级菜单" readonly="readonly">
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="icon" class="col-sm-2 control-label">图标：</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" v-model="info.icon" placeholder="请选择图标" readonly="readonly">
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="url" class="col-sm-2 control-label">访问链接：</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" v-model="info.url" placeholder="请输入访问链接">
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="sort" class="col-sm-2 control-label">排序：</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" v-model="info.sort" placeholder="请输入排序">
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="ismenu" class="col-sm-2 control-label">是否为菜单：</label>
                           <div class="col-sm-10">
                           		<el-radio v-model="info.ismenu" label="1">是</el-radio>
  								<el-radio v-model="info.ismenu" label="0">否</el-radio>
                           </div>
                       </div>
                       <div class="form-group">
                           <label for="tips" class="col-sm-2 control-label">备注：</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" v-model="info.tips" placeholder="请输入备注">
                           </div>
                       </div>
                       <div class="form-group">
                           <div class="col-sm-offset-2 col-sm-10">
                               <button type="button" class="btn btn-info" @click="save">保存</button>
                               <button type="button" class="btn btn-default" @click="cancel">取消</button>
                           </div>
                       </div>
                   </form>
               </div>
           </div>
       </div>
   </div>
   <script type="text/javascript">
   var vm = new Vue({
	    el: '#main',
	    data: {
	    	info:{
	    		name:"1",
	    		code:"",
	    		pcode:"",
	    		icon:"",
	    		url:"",
	    		sort:"",
	    		ismenu:"1",
	    		tips:"",
	    		pname:""
	    	},
    		defaultProps: {
  	          children: 'children',
  	          label: 'label'
  	        },
	    	menuTree:[{
  	          label: '一级 1',
  	          children: [{
  	            label: '二级 1-1',
  	            children: [{
  	              label: '三级 1-1-1'
  	            }]
  	          }]
  	        }, {
  	          label: '一级 2',
  	          children: [{
  	            label: '二级 2-1',
  	            children: [{
  	              label: '三级 2-1-1'
  	            }]
  	          }, {
  	            label: '二级 2-2',
  	            children: [{
  	              label: '三级 2-2-1'
  	            }]
  	          }]
  	        }, {
  	          label: '一级 3',
  	          children: [{
  	            label: '二级 3-1',
  	            children: [{
  	              label: '三级 3-1-1'
  	            }]
  	          }, {
  	            label: '二级 3-2',
  	            children: [{
  	              label: '三级 3-2-1'
  	            }]
  	          }]
  	        }],
	    },
			    // 点击菜单使用的函数
	    methods: {
	    	selectParentMenu(){
	    		layer.open({
	    			  type: 2,
	    			  title: '选择父级菜单',
	    			  shadeClose: true,
	    			  shade: 0.8,
	    			  area: ['300px', '400px'],
	    			  content: '${ctxPath}/menu/tree' //iframe的url
	    			}); 
	    	},
	    	save:function(){
	    		axios.post('/menu/add', vm.getParams()).then(function (response) {
	            	var data = response.data;
	            	if(data.code==200){
	            		parent.vm.onload();
// 	            		parent.layer.closeAll();
	            	}
	              }).catch(function (error) {
	                console.log(error);
	              });
	    	},
	    	cancel:function(){
	    		parent.layer.closeAll();
	    	},
	        onload:function(){
	        	
	        },
	        selectParentCallback:function(parent){
	        	console.log(parent)
	        	vm.info.pname = parent.name;
	        	vm.info.pcode = parent.code;
	        },
	    	handleSizeChange(val) {
	          console.log('每页'+ val +'条');
	          vm.pagesize = val;
	          this.getTableData();
	        },
	        handleCurrentChange(val) {
	          console.log('当前页: '+ val );
	          vm.pageno = val;
	          this.getTableData();
	        },
	        handleEdit(index,row){
	        	  console.log("编辑")
	          	  console.log(row)
	        },
	        handleDelete(index,row){
	      	  console.log("删除")
	      	  console.log(row)
	        },
	        getParams:function(){
	        	var params = new URLSearchParams();
	        	params.append('name', vm.info.name);
	        	params.append('code', vm.info.code);
	        	params.append('pcode', vm.info.pcode);
	        	params.append('icon', vm.info.icon);
	        	params.append('url', vm.info.url);
	        	params.append('sort', vm.info.sort);
	        	params.append('ismenu', vm.info.ismenu);
	        	params.append('tips', vm.info.tips);
	        	return params;
	        },
	   		getTableData:function(){
	        	axios.post('/list', vm.getParams()).then(function (response) {
	            	var data = response.data.data;
	            	vm.pagesize = data.pagesize;
	            	vm.pageno = data.pageno;
	            	vm.total = data.totalCount;
	                vm.tableData = data.list;
	              }).catch(function (error) {
	                console.log(error);
	              });
	   		}
	    }
	});
	vm.onload();
   </script>
</body>

</html>
